<template>
  <view class="template-help tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
      <view slot="title" class="nav-title">帮助中心</view>
    </tn-nav-bar>

    <view class="content-container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 搜索框 -->
      <view class="search-box tn-margin-horizontal tn-margin-top">
        <view class="search-input">
          <text class="tn-icon-search tn-color-grey"></text>
          <input type="text" placeholder="搜索问题关键词" v-model="searchKeyword" @input="handleSearch" />
        </view>
      </view>

      <!-- 热门问题 -->
      <view class="hot-questions tn-margin-horizontal tn-margin-top">
        <view class="section-title">热门问题</view>
        <view class="hot-tags">
          <view class="tag" v-for="(tag, index) in hotTags" :key="index" @click="searchKeyword = tag">{{ tag }}</view>
        </view>
      </view>

      <!-- 常见问题分类 -->
      <view class="faq-section tn-margin-horizontal">
        <!-- 账号相关 -->
        <view class="section-header tn-strip-top tn-margin-top">
          <view class="section-icon tn-icon-user"></view>
          <view class="section-name">账号相关</view>
        </view>
        <view 
          class="faq-item tn-strip-bottom-min" 
          v-for="(item, index) in filteredList('account')" 
          :key="index" 
          @click="goToDetail(item)"
        >
          <view class="item-content">{{ item.title }}</view>
          <view class="item-arrow tn-icon-right tn-color-grey"></view>
        </view>

        <!-- 登录相关 -->
        <view class="section-header tn-strip-top tn-margin-top">
          <view class="section-icon tn-icon-lock"></view>
          <view class="section-name">登录问题</view>
        </view>
        <view 
          class="faq-item tn-strip-bottom-min" 
          v-for="(item, index) in filteredList('login')" 
          :key="index" 
          @click="goToDetail(item)"
        >
          <view class="item-content">{{ item.title }}</view>
          <view class="item-arrow tn-icon-right tn-color-grey"></view>
        </view>

        <!-- 功能使用 -->
        <view class="section-header tn-strip-top tn-margin-top">
          <view class="section-icon tn-icon-cog"></view>
          <view class="section-name">功能使用</view>
        </view>
        <view 
          class="faq-item tn-strip-bottom-min" 
          v-for="(item, index) in filteredList('function')" 
          :key="index" 
          @click="goToDetail(item)"
        >
          <view class="item-content">{{ item.title }}</view>
          <view class="item-arrow tn-icon-right tn-color-grey"></view>
        </view>

        <!-- 其他问题 -->
        <view class="section-header tn-strip-top tn-margin-top">
          <view class="section-icon tn-icon-question-circle"></view>
          <view class="section-name">其他问题</view>
        </view>
        <view 
          class="faq-item tn-strip-bottom-min" 
          v-for="(item, index) in filteredList('other')" 
          :key="index" 
          @click="goToDetail(item)"
        >
          <view class="item-content">{{ item.title }}</view>
          <view class="item-arrow tn-icon-right tn-color-grey"></view>
        </view>
      </view>

      <!-- 客服入口 -->
      <view class="customer-service tn-margin tn-margin-top-xl">
        <button class="contact-btn" @click="contactService">
          <text class="tn-icon-headphone"></text>
          <text class="btn-text">联系客服</text>
        </button>
        <view class="service-time tn-text-sm tn-color-grey tn-text-center tn-margin-top">
          工作时间: 周一至周五 9:00-18:00
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'TemplateHelp',
  mixins: [template_page_mixin],
  data() {
    return {
      searchKeyword: '',
      hotTags: ['验证码', '登录', '密码', '微信授权', '账号切换'],
      faqList: [
        // 账号相关
        {
          category: 'account',
          title: '如何修改个人资料？',
          content: '进入"我的"页面，点击头像或个人信息区域，即可修改个人资料。'
        },
        {
          category: 'account',
          title: '如何绑定/解绑手机号？',
          content: '在"设置-账号安全"中可以进行手机号的绑定和解绑操作，解绑前请确保已设置其他登录方式。'
        },
        {
          category: 'account',
          title: '账号被冻结怎么办？',
          content: '账号冻结可能是由于违反平台规定，您可以联系客服查询具体原因并申请解封。'
        },
        {
          category: 'account',
          title: '如何注销账号？',
          content: '注销账号前请确保已了解相关风险，可在"设置-账号安全-注销账号"中按提示操作。'
        },
        
        // 登录相关
        {
          category: 'login',
          title: '修改了密码还可以登录吗？',
          content: '修改密码后需要使用新密码登录，旧密码将失效。如果忘记新密码，可以通过找回密码功能重新设置。'
        },
        {
          category: 'login',
          title: '找回密码无法收到验证码',
          content: '请检查手机是否有信号、是否拦截了短信，也可以尝试重新发送验证码，间隔时间建议在60秒以上。'
        },
        {
          category: 'login',
          title: '账号无法退出切换账号',
          content: '您可以在"我的-设置"页面底部找到退出登录按钮，退出后即可切换其他账号登录。'
        },
        {
          category: 'login',
          title: '无法授权微信登录',
          content: '请检查微信是否正常登录，网络是否通畅，以及是否授予了相关权限。如仍有问题，可尝试重启应用或手机。'
        },
        {
          category: 'login',
          title: '我的账号登录上别人的账号了',
          content: '这种情况可能是由于账号共享导致，请立即修改密码并在"设置-账号安全"中查看登录设备，移除陌生设备。'
        },
        {
          category: 'login',
          title: '手机登录无法收到验证码',
          content: '请确认手机号输入正确，检查是否在短信黑名单中，也可以尝试使用语音验证码功能。'
        },
        
        // 功能使用
        {
          category: 'function',
          title: '如何查看我的历史记录？',
          content: '在"我的"页面中找到"历史记录"选项，即可查看您的操作和浏览记录。'
        },
        {
          category: 'function',
          title: '如何设置消息通知？',
          content: '在"设置-通知设置"中可以开启或关闭各类消息通知，包括系统通知、活动通知等。'
        },
        {
          category: 'function',
          title: '如何更新应用到最新版本？',
          content: '您可以在应用商店中搜索本应用，点击更新按钮进行版本更新，或在"设置-关于我们"中检查更新。'
        },
        
        // 其他问题
        {
          category: 'other',
          title: '如何反馈问题或建议？',
          content: '您可以通过"我的-帮助与反馈"提交问题或建议，我们会尽快处理并回复。'
        },
        {
          category: 'other',
          title: '应用卡顿闪退怎么办？',
          content: '建议清理手机缓存，关闭后台其他应用，如问题持续，可尝试卸载重装应用。'
        }
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    handleSearch() {
      // 搜索逻辑，实时过滤问题列表
    },
    filteredList(category) {
      // 根据分类和搜索关键词过滤列表
      return this.faqList.filter(item => {
        const matchCategory = item.category === category;
        const matchKeyword = this.searchKeyword 
          ? item.title.includes(this.searchKeyword) 
          : true;
        return matchCategory && matchKeyword;
      });
    },
    goToDetail(item) {
      // 跳转到详情页，携带问题数据
      uni.navigateTo({
        url: `/minePages/helpDetail?title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}`
      });
    },
    contactService() {
      // 联系客服逻辑，可根据实际情况实现
      uni.showModal({
        title: '联系客服',
        content: '您可以通过以下方式联系我们：\n电话：400-123-4567\n邮箱：support@example.com',
        showCancel: false
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 导航栏样式
.nav-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

// 内容容器
.content-container {
  background-color: #fff;
  min-height: 100vh;
}

// 搜索框样式
.search-box {
  padding: 16rpx 0;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  
  .tn-icon-search {
    margin-right: 12rpx;
    font-size: 32rpx;
  }
  
  input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    height: 40rpx;
    font-size: 28rpx;
  }
}

// 热门问题
.hot-questions {
  padding: 10rpx 0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.tag {
  background-color: #f5f5f5;
  color: #666;
  padding: 12rpx 24rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background-color: #e8f4e9;
    color: #2c6e31;
  }
}

// 分类标题
.section-header {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  
  .section-icon {
    font-size: 36rpx;
    color: #2c6e31;
    margin-right: 16rpx;
  }
  
  .section-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
}

// 问题列表项
.faq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 0;
  transition: background-color 0.2s;
  
  &:active {
    background-color: #f5f5f5;
  }
  
  .item-content {
    font-size: 30rpx;
    color: #333;
    line-height: 1.5;
    flex: 1;
  }
  
  .item-arrow {
    font-size: 36rpx;
    margin-left: 16rpx;
  }
}

// 客服区域
.customer-service {
  padding-bottom: 30rpx;
}

.contact-btn {
  width: 100%;
  background-color: #2c6e31;
  color: #fff;
  border-radius: 80rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  
  .tn-icon-headphone {
    margin-right: 12rpx;
    font-size: 36rpx;
  }
  
  &:active {
    background-color: #245a28;
  }
}

// 原有样式保留
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;
  
  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #F8F9FB;
}

.tn-strip-top {
  width: 100%;
  border-top: 20rpx solid rgba(241, 241, 241, 0.8);
}
</style>